<template>
  <el-dialog
    :title="$t('om.Progressfollowup')"
    :visible.sync="dialogVisible"
    :width="1300"
    :before-close="beforeClose"
  >
    <div class="h-192">
      <!-- <el-steps :active="active" finish-status="success">
        <el-step v-for="item in props.orderProgressOptions" :title="item.label" />
      </el-steps> -->
      <OrderStep :stepList="props.orderProgressOptions" :active="active" />
    </div>
  </el-dialog>
</template>
<script setup>
import OrderStep from '@/components/OrderStep/index.vue';
import { ref, reactive, onMounted } from 'vue';
const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  progressStatus: {
    type: Number,
    default: 0,
  },
  orderProgressOptions: {
    type: Array,
    default: () => [],
  },
});
onMounted(() => {
  console.log(props.orderProgressOptions);
});
const emit = defineEmits(['update:value', 'handleClose']);
const dialogVisible = ref(false);
const active = ref(0);
active.value = props.progressStatus;

const beforeClose = () => {
  emit('handleClose');
};
</script>

<style lang="scss" scoped>
.h-192 {
  height: 100px;
}
</style>
